<script>
import { mapState } from 'vuex';

const getHeight = (width = window.innerWidth) => {
  return width > 640 ? 400 : (400 / 640) * width;
};

export default {
  data() {
    return {
      iframeHeight: getHeight(),
    };
  },
  computed: {
    ...mapState({
      width: (state) => state.width,
    }),
  },
  watch: {
    width() {
      this.iframeHeight = getHeight(this.width);
    },
  },
};
</script>

<template>
  <div class="dzq-index-section">
    <div class="dzq-index-section__hd">
      <h2 class="dzq-index-section__title"><span>关于Discuz! Q</span></h2>
    </div>
    <div class="dzq-index-section__bd dzq-video">
      <div class="zdzq-row">
        <div class="zdzq-col-12 dzq-video-right">
          <iframe
            :height="iframeHeight"
            allowfullscreen="allowfullscreen"
            src="https://cloud.tencent.com/edu/learning/quick-play/2823-53741"
            style="
              background-color: rgb(0, 0, 0);
              width: 100%;
              cursor: pointer;
              border-width: 0;
              border-style: none;
            "
          ></iframe>
        </div>
        <div class="zdzq-col-12">
          <div class="dzq-video-desc">
            <p>大家好！我是 Discuz! Q。</p>
            <p>
              作为中文 PC 互联网最知名的社区开源软件 Discuz!，在过去 15 年间，服务过超过 200
              万网站客户。其推出的 UCenter、SupeSite，ECshop
              等组件所代表的产品理念对今天移动互联网各类产品的技术架构至今仍有着深远的影响，毫不夸张的说，Discuz!
              代表了互联网 2.0 时代里社交网络的最初形态。
            </p>
            <p>
              近10年来，中文互联网发生了天翻地覆的变化，应用形态从 PC
              端迁移到了移动端，深刻的改变了人们获取信息的方式，与此同时，开源服务的技术形态也从私有化部署走向了以
              SaaS
              为代表的云服务。“站长”这个群体也随之逐渐销声匿迹，互联网的主流形态从人与信息的连接也转为人与人的连接。我一度以为社区
              BBS
              已经完成了自己的历史使命，信息的分享与沉淀变得不再那么重要。但随着时间的发展，我们注意到了一些重要的变化：以微信群、朋友圈、微博为代表，人和人的连接效率越来越高，信息传播的速度越来越快，社交网络走向圈层化，信息消费呈现出噪点化、重复化、碎片化和快餐化的特征。与此同时，移动互联网的人口增长红利消失，巨头对流量垄断的马太效应凸显，产业经济内卷化加重，信息的降噪沉淀变成了国民级痛点，越来越多的网红大V靠私域流量的持续经营就可以获得长期的回报。因此，我们经过一年的精心准备，决定在新消费新内容经济的今天，正式推出全新的系列产品：Discuz!
              Q。
            </p>
            <p>
              全新的 Discuz! Q
              拥有完全开源、提供丰富接口、前后端分离、轻量化、数据独立可控、敏捷上云、快速变现七大能力，我们希望通过这些能力，能够帮助创业者更高效的上线内容产品，让信息能高效准确的分享与传播，流量变现能更加简单快捷。在某种意义上，我们希望能够重塑移动社区的用户体验，提供一种更可靠的信息连接与知识传播的方式。
            </p>
            <p>
              众所周知，技术的演进发展是不可阻挡的，任何新的应用形态都会波浪式前进，螺旋式上升，最终达到理想形态。Discuz!
              Q 也许还不够完美，但我们会持续的自我进化，饱和式探索。我们确信，在不远的未来，Discuz!
              Q 会成长为全网领先的私域流量经营工具。
            </p>
            <p>接下来，就是见证 Discuz! Q 再创奇迹的时刻了，加油，奥利给！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dzq-video {
  margin-bottom: 50px;
}
.dzq-video-desc {
  padding: 10px 26px 10px 20px;
  max-height: 392px;
  overflow: auto;

  @include scrollbar();

  p {
    font-size: 16px;
    text-indent: 30px;
    text-align: justify;
    color: #8b9db6;
  }
}

@media screen and (max-width: 768px) {
  .dzq-video {
    margin: 39px 15px 0;
  }
  .dzq-video-right {
    margin-bottom: 15px;
  }
  .dzq-video-desc {
    padding: 0 15px 0 0;
    p {
      font-size: 15px;
      color: #8b9db6;
    }
  }
}
</style>
